<template>
  <el-dialog
          :model-value="dialogRelImageVisible"
          :title="dialogRelImageTitle"
          :before-close="handleCancelRelImageDialog"
          width="65%"
          top="5vh"
  >
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="云存储图片介质" name="storage">
        <storage-medium
                ref="storageMediumRef"
                :form-data="imageFormData"
                mediumtype="image"
                :mediatype="dialogRelImageMediaType"
                :relAction="dialogRelAction"
                :select-type="dialogSelectType"
                @handleVideoPlay="handleVideoPlay"
        />
      </el-tab-pane>
      <el-tab-pane label="云媒资图片介质" name="cloudmedia">
        <image-medium
                ref="imageMediumRef"
                :relAction="dialogRelAction"
                :form-data="imageFormData"
                :select-type="dialogSelectType"
                :media-type="dialogRelImageMediaType"
        />
      </el-tab-pane>
      <el-tab-pane label="新建网络图片介质" name="networkimage">
        <network-image
                ref="networkImageRef"
                :createImageFormData="createImageFormData"
        />
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <div align="center">
        <el-button type="default" size="mini" @click="handleCancelRelImageDialog">取消</el-button>
        <el-button type="primary" size="mini" v-if="activeName == 'networkimage'" @click="handleCreateImageMedium">保存并关联</el-button>
        <el-button type="primary" size="mini" v-else  @click="handleRelImageMedium">确定选择</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
  import {ref, toRef, nextTick, reactive} from 'vue'
  import StorageMedium from "./StorageMedium";
  import ImageMedium from "./ImageMedium";
  import NetworkImage from "./NetworkImage";
  import {seriesRelImageMediums, mediaRelImages} from "@/api/media/media";
  import {ElMessage} from 'element-plus'
  import {packageRelImage} from "@/api/package/material";

  export default {
    name: "RelImageMedium",
    components: {StorageMedium, ImageMedium, NetworkImage},
    props: {
      dialogRelImageVisible: {
        type: Boolean,
        default: false
      },
      dialogRelImageTitle: {
        type: String,
        default: ''
      },
      dialogRelImageMediaType: {
        type: String,
        default: 'media'
      },
      dialogRelImageFormData: {
        type: Object,
        default() {
          return {
            mediaid: undefined,
            seriesid: undefined,
            datas: []
          }
        }
      },
      dialogRelAction: {
        type: String,
        default: 'relmedium'
      },
      dialogSelectType: {
        type: String,
        default: 'checkbox'
      }
    },
    emits: ['handleCancelRelImageDialog', 'handleVideoPlay', 'reloadMediaData'],
    setup(props, context) {
      const activeName = ref('storage')
      const imageFormData = toRef(props, 'dialogRelImageFormData')
      const storageMediumRef = ref(null)
      const imageMediumRef = ref(null)
      const networkImageRef = ref(null)
      const createImageFormData = reactive({
        groupid: imageFormData.value.groupid,
        name: '',
        url: '',
        layout: ''
      })

      /** 关闭弹框 **/
      const handleCancelRelImageDialog = () => {
        context.emit('handleCancelRelImageDialog')
      }
      /** tab切换事件 **/
      const handleClick = (tab) => {
        imageFormData.value.datas = []
        if (tab.props.name == 'cloudmedia') {
          nextTick(() => {
            imageMediumRef.value.init()
          })
        } else if (tab.props.name == 'storage') {
          nextTick(() => {
            if (storageMediumRef.value.isRoot) {
              init()
            } else {
              storageMediumRef.value.getFolderFileList()
            }
          })
        } else {
          resetCreateFormData()
          nextTick(() => {
            networkImageRef.value.createFormRef.clearValidate()
          })
        }
      }
      /** 确定关联图片介质 **/
      const handleRelImageMedium = () => {
        if (imageFormData.value.datas.length <= 0) {
          ElMessage({type: 'warning', message: '请选择图片', duration: 2000})
        } else {
          if (props.dialogRelImageMediaType == 'media') {
            if (activeName.value == 'storage') {
              imageFormData.value.datatype = 2
            } else {
              imageFormData.value.datatype = 1
            }
            mediaRelImages(imageFormData.value).then(response => {
              if (response.errcode == 0) {
                ElMessage({type: 'success', message: response.msg, duration: 2000})
                handleCancelRelImageDialog()
                context.emit('reloadMediaData', response.data)
              }
            })
          } else if (props.dialogRelImageMediaType == 'series') {
            if (activeName.value == 'storage') {
              imageFormData.value.datatype = 2
            } else {
              imageFormData.value.datatype = 1
            }
            seriesRelImageMediums(imageFormData.value).then(response => {
              if (response.errcode == 0) {
                ElMessage({type: 'success', message: response.msg, duration: 2000})
                handleCancelRelImageDialog()
                context.emit('reloadMediaData', response.data)
              }
            })
          } else if (props.dialogRelImageMediaType == 'package') {
            if (activeName.value == 'storage') {
              imageFormData.value.datatype = 2
            } else {
              imageFormData.value.datatype = 1
            }
            packageRelImage(imageFormData.value).then(response => {
              if (response.errcode == 0) {
                ElMessage({type: 'success', message: response.msg, duration: 2000})
                handleCancelRelImageDialog()
                context.emit('reloadMediaData', response.data)
              }
            })
          }
        }
      }
      /** 初始化 **/
      const init = () => {
        activeName.value = 'storage'
        nextTick(() => {
          storageMediumRef.value.init()

        })
      }
      /** 播放视频 **/
      const handleVideoPlay = (row) => {
        context.emit('handleVideoPlay', row)
      }
      const resetCreateFormData = () => {
        createImageFormData.name = ''
        createImageFormData.groupid = imageFormData.value.groupid
        createImageFormData.url = ''
        createImageFormData.layout = ''
      }
      const handleCreateImageMedium = () => {
        networkImageRef.value.createFormRef.validate(valid => {
          if (valid) {
            imageFormData.value.datatype = 3
            if (props.dialogRelImageMediaType == 'media') {
              imageFormData.value.datas = [createImageFormData]
              mediaRelImages(imageFormData.value).then(response => {
                if (response.errcode == 0) {
                  ElMessage({type: 'success', message: response.msg, duration: 2000})
                  handleCancelRelImageDialog()
                  context.emit('reloadMediaData', response.data)
                }
              })
            } else if (props.dialogRelImageMediaType == 'series') {
              imageFormData.value.datas = [createImageFormData]
              seriesRelImageMediums(imageFormData.value).then(response => {
                if (response.errcode == 0) {
                  ElMessage({type: 'success', message: response.msg, duration: 2000})
                  handleCancelRelImageDialog()
                  context.emit('reloadMediaData', response.data)
                }
              })
            } else {
              imageFormData.value.datas = [createImageFormData]
              packageRelImage(imageFormData.value).then(response => {
                if (response.errcode == 0) {
                  ElMessage({type: 'success', message: response.msg, duration: 2000})
                  handleCancelRelImageDialog()
                  context.emit('reloadMediaData', response.data)
                }
              })
            }
          }
        })
      }

      return {
        handleClick,
        activeName,
        handleCancelRelImageDialog,
        imageFormData,
        storageMediumRef,
        handleVideoPlay,
        imageMediumRef,
        handleRelImageMedium,
        createImageFormData,
        networkImageRef,
        handleCreateImageMedium,
        init
      }
    }
  }
</script>

<style scoped>

</style>
